<!--suppress ALL -->
<html xmlns:pdf="https://github.com/xhtml2pdf/xhtml2pdf/blob/master/doc/usage.rst">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>
        @page {
            size: a4 portrait;
            margin-left: 40px;
            margin-top: 50px;
            margin-right: 30px;

            @frame header {
                -pdf-frame-content: headerContent;
                -pdf-frame-max-width: 100%;
                width: 100%;
                height: 5%;
                display: block;
                position: absolute;
            }

            @frame main_content {
                margin-top: 8px;
                -pdf-frame-content: mainContent;
                -pdf-frame-max-width: 100%;
                width: 100%;
                display: block;
                position: absolute;
            }

            @frame footer {
                margin-top: 5px;
                -pdf-frame-content: footerContent;
            }
        }

        #billing_logo {
            font-size: 1.5rem;
            color: #555;
            margin-bottom: 10px;
        }

        #qrcode img {
            width: 100px;
            height: 100px;
            padding-top: 20px;
        }

        #app_name {
            font-size: 1.5rem;
            font-weight: bold;
            color: #555;
        }

        #order_id {
            font-weight: bold;
            color: #808080;
            font-size: 11px;
        }

        #location,
        #role {
            font-size: 15px;
            color: #303130;
            font-weight: bold;
        }

        #event_message {
            font-size: 15px;
            color: #303130;
            font-weight: bold;
        }

        .custom_label {
            font-size: 10px;
            color: #808080;
            padding-left: 10px;
        }

        .main_content {
            border: 1px solid #181818;
            border-radius: 30px;
            padding: 25px 10px 25px 35px;
            border-collapse: collapse;
            margin-top: 5px;
        }

        #event_name {
            padding: 10px;
            font-size: 30px;
            font-weight: bold;
            color: #808080;
        }

        tr,
        td {
            border: 1px solid white;
        }

        .data {
            font-size: 10px;
            color: #181818;
        }

        #order_details {
            padding: -1px;
            margin: 10px;
        }

        .time {
            font-size: 10px;
            color: #333333;
        }

        #event-image {
            width: 150px;
            height: 75px;
            padding-top: 20px;
        }

        #event-logo{
            width:100px;
            height:100px;
            padding-top:20px;
        }
    </style>
</head>

<body>
    <table id="header">
        <tr>
            <td>
                <div id="billing_logo">
                    {% if admin_info.admin_billing_logo %}
                    <img src="{{admin_info.admin_billing_logo}}" alt="organization logo" /><br>
                    {% else %}
                    <span id="app_name">{{app_name}}</span>
                    {% endif %}
                </div>
            </td>

            <td align="right" style="vertical-align: bottom;"><span id="order_id">{{_('Order
                    #%(invoice_number)s',invoice_number="")}}{{order.get_invoice_number()}}</span></td>
        </tr>
    </table>
    <div class="main_content" id="main_content">
        <table>
            <tr>
                <td id="event_name" colspan=2>
                    <span>{{order.event.name}}</span><br>
                    <span id="role">{{holder.ticket.name}}</span><br>
                    <span id="location">
                        {% if order.event.online %}
                        {% if order.event.location_name %}
                        <span>{{ _('Event taking place online and at %(event_location)s.', event_location=order.event.location_name) }}</span>
                        {% else %}
                        <span>{{_('Event taking place online.')}}</span>
                        {% endif %}
                        {% elif order.event.location_name %}
                        <span>{{ _('Event taking place at %(event_location)s.', event_location=order.event.location_name) }}</span>
                        {% else %}
                        <span>{{ _('Location or online event details to be announced.') }}</span>
                        {% endif %}
                    </span>
                    <br>
                    <span>
                        {% if order.event.starts_at %}
                        <span class="time">{{_('From: %(start_time)s',start_time=starts_at)}}</span>
                        {% endif %}
                        <br>
                        {% if order.event.ends_at %}
                        <span class="time">{{_('To: %(end_time)s',end_time=ends_at)}}</span>
                        {% endif %}
                    </span>
                    <span>
                        <table id="order_details">
                            <tr>
                                <td>
                                    <span class="custom_label">{{_('Order Information')}}</span>
                                    <p class="data">{{_('Order
                                        #%(invoice_number)s',invoice_number="")}}{{order.get_invoice_number()}}</p>
                                </td>
                                <td>
                                    <span class="custom_label">{{_('Name')}}</span>
                                    <p class="data">{{holder.name}}</p>
                                </td>
                                <td>
                                    <span class="custom_label">{{_('Email')}}</span>
                                    <p class="data">{{holder.email}}</p>
                                </td>
                            </tr>
                        </table>
                    </span>
                </td>
                <td align="center">
                    {% if order.event.original_image_url %}
                    <img src="{{order.event.original_image_url}}" alt="" id="event-image">
                    {% elif order.event.logo_url %}
                    <img src="{{order.event.logo_url}}" alt="" id="event-logo">
                    {% endif %}
                    <br><br><br>
                    <div id="qrcode">
                        <img src="data:image/png;base64,{{ holder.qr_code }}" />
                        <br>
                        <span>#{{order.get_invoice_number()}}</span>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    {% if order.event.after_order_message %}
    <div class="main_content" id="footer">
        <span id="event_message">{{ order.event.after_order_message | replace("\n","<br>") | safe }}</span>
    </div>
    {% endif %}
</body>

</html>


<pdf:nextpage />